import React, { Component } from 'react';
import { NavLink } from 'react-router-dom'
import Header from '../compents/Header'
import Footer from '../compents/Footer'
import Banner from '../views/Banner'
import index from '../css/Index.module.css'
import moudle from '../css/Moudle.module.css'
import { Icon, DatePicker, Modal, Button } from 'antd';
class Index extends Component {
    state = {
        visible: false
    };

    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    hideModal = () => {
        this.setState({
            visible: false,
        });
    };
    moudle(e) {
        // console.log(e.target.parent)
        this.setState({
            visible: true,
        });
    }
    render() {
        return (
            < div >
                <Header />
                <Banner />
                <div className={index.div}>

                    <div className={index.row}>
                        <div className={index.hjx}>
                            <img src={require('../img/logo2.png')} alt="" className={index.img} />
                            <img src={require('../img/banner2.png')} alt="" className={index.img2} />
                            <p className={index.pt}>*条款和条件</p>
                        </div>
                    </div>
                    <div className={index.row}>

                        <div className={index.hjx}>
                            <h2 className={index.h2}>今日最热门优惠</h2>
                            <div className={index.lb}>
                                <ul>
                                    <li>
                                        <div className={index.img_con}>
                                            <NavLink to={"/xiang"}>
                                                <div>
                                                    <img src='https://a.cdn-hotels.com/cos/production/cabe831b-4c7b-4974-ad6b-47facf231f3f/0.21/6ecb3003-6aba-406b-ab4c-81e1aa55f579.jpg' alt="" className={index.img} />
                                                </div>
                                                <div className={index.lbon}>
                                                    <div className={index.bold}>最后时限订房优惠</div>
                                                    <div>享酒店预订优惠，随时随地</div>
                                                    <div className={index.button}>查看优惠</div>
                                                </div>
                                            </NavLink>
                                        </div>
                                    </li>
                                    <li>
                                        <div className={index.img_con}>
                                            <NavLink to={"/xiang"}>
                                                <div>
                                                    <img src='https://a.cdn-hotels.com/cos/production/cabe831b-4c7b-4974-ad6b-47facf231f3f/0.21/7771e355-5786-4de6-b96f-1c448f32d28f.jpg' alt="" className={index.img} />
                                                </div>
                                                <div className={index.lbon}>
                                                    <div className={index.bold}>6 折*起</div>
                                                    <div>可别错过这些优惠！</div>
                                                    <div className={index.button}>立即预订</div>
                                                </div>
                                            </NavLink>
                                        </div>
                                    </li>
                                    <li>
                                        <div className={index.img_con}>
                                            <NavLink to={"/xiang"}>
                                                <div>
                                                    <img src='https://a.cdn-hotels.com/cos/production/cabe831b-4c7b-4974-ad6b-47facf231f3f/0.21/7efad54a-c2f0-4ffb-8f5c-9fd1b1d496a9.jpg' alt="" className={index.img} />
                                                </div>
                                                <div className={index.lbon}>
                                                    <div className={index.bold}>凭住宿优惠省更多费用</div>
                                                    <div>精明预订，轻松省钱！</div>
                                                    <div className={index.button}>立即预订</div>
                                                </div>
                                            </NavLink>
                                        </div>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <div className={index.img_con}>
                                            <NavLink to={"/xiang"}>
                                                <div>
                                                    <img src='https://a.cdn-hotels.com/cos/production/cabe831b-4c7b-4974-ad6b-47facf231f3f/0.21/a1bf1be9-52df-4ec5-b8e4-490886acbb5e.jpg' alt="" className={index.img} />
                                                </div>
                                                <div className={index.lbon}>
                                                    <div className={index.bold}>尽享度假酒店休闲时光</div>
                                                    <div>拥抱阳光、大海与沙滩</div>
                                                    <div className={index.button}>立即预订</div>
                                                </div>
                                            </NavLink>
                                        </div>
                                    </li>
                                    <li>
                                        <div className={index.img_con}>
                                            <NavLink to={"/xiang"}>
                                                <div>
                                                    <img src='https://a.cdn-hotels.com/cos/production/cabe831b-4c7b-4974-ad6b-47facf231f3f/0.21/2eb93a9d-75bc-4760-8b7c-11ac260afd3d.jpg' alt="" className={index.img} />
                                                </div>
                                                <div className={index.lbon}>
                                                    <div className={index.bold}>展开精彩大冒险</div>
                                                    <div>住宿优惠，让您省更多</div>
                                                    <div className={index.button}>立即预订</div>
                                                </div>
                                            </NavLink>
                                        </div>
                                    </li>
                                    <li>
                                        <div className={index.img_con}>
                                            <NavLink to={"/xiang"}>
                                                <div>
                                                    <img src='https://a.cdn-hotels.com/cos/production/cabe831b-4c7b-4974-ad6b-47facf231f3f/0.21/a0954663-9751-44e5-980e-ee7fcd9ee98c.jpg' alt="" className={index.img} />
                                                </div>
                                                <div className={index.lbon}>
                                                    <div className={index.bold}>下载 App</div>
                                                    <div>安装我们的 App，随时随地订酒店</div>
                                                    <div className={index.button}>了解更多讯息</div>
                                                </div>
                                            </NavLink>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                    <div cla bnssName={index.row}>
                        <div className={index.hjx}>
                            <h2 className={index.h2}>除了酒店，我们也有……</h2>
                            <div className={index.lb}>
                                <Modal
                                    title="酒店"
                                    visible={this.state.visible}
                                    onOk={this.hideModal}
                                    onCancel={this.hideModal}
                                    okText="确认"
                                    cancelText="取消"
                                >
                                    <div className={moudle.search}>
                                        <h1><Icon type="search" />酒店 <span>(中文/拼音/英文)</span></h1>
                                        <p className={moudle.p1}>全球目的地和住宿...</p>
                                        <from className={moudle.cont}>
                                            <div className={moudle.from}>
                                                <input type="text" placeholder="广州, 中国" />
                                            </div>
                                            <div className={moudle.from}>
                                                <div className={moudle.from1}>
                                                    <label>入住</label>
                                                    <DatePicker />
                                                </div>
                                                <div className={moudle.from1}>
                                                    <label>退房</label>
                                                    <DatePicker />
                                                </div>
                                            </div>
                                            <div className={moudle.from}>
                                                <div className={moudle.from2}>
                                                    <label>客房</label>
                                                    <select>
                                                        <option data-rooms="1" data-adults="1">1 间客房, 1 位成人</option>
                                                        <option data-rooms="1" data-adults="2" selected="selected">1 间客房, 2 位成人</option>
                                                        <option data-more-options="true">其他选择…</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </from>
                                    </div>
                                </Modal>
                                <ul className={index.lbf} onClick={this.moudle.bind(this)}>
                                    <li>
                                        <img src='https://a.cdn-hotels.com/images/common/pages/lpa/homepage/propertytypes/desktop/apartments.jpg' alt="" />
                                        <p>公寓</p>
                                    </li>
                                    <li>
                                        <img src='https://a.cdn-hotels.com/images/common/pages/lpa/homepage/propertytypes/desktop/hotels.jpg' alt="" />
                                        <p>酒店</p>
                                    </li>
                                    <li>
                                        <img src='https://a.cdn-hotels.com/images/common/pages/lpa/homepage/propertytypes/desktop/city_homes.jpg' alt="" />
                                        <p>城市住宿</p>
                                    </li>
                                    <li>
                                        <img src='https://a.cdn-hotels.com/images/common/pages/lpa/homepage/propertytypes/desktop/country_retreats.jpg' alt="" />
                                        <p>乡村度假屋</p>
                                    </li>
                                    <li>
                                        <img src='https://a.cdn-hotels.com/images/common/pages/lpa/homepage/propertytypes/desktop/holiday_homes.jpg' alt="" />
                                        <p>度假屋</p>
                                    </li>
                                    <li>
                                        <img src='https://a.cdn-hotels.com/images/common/pages/lpa/homepage/propertytypes/desktop/resorts.jpg' alt="" />
                                        <p>度假村</p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div className={index.row}>
                        <div className={index.hjx}>
                            <h2 className={index.h2}>推荐目的地</h2>
                            <div>
                                <div className={index.frist}>
                                    <div>
                                        <NavLink to={'/xiang'}>
                                            <img src={require('../img/imgad.jpg')} alt="" />

                                            <div className={index.frist_div}>
                                                <div>
                                                    <h1>上海</h1>
                                                    <span>有 39,704 位用户搜索住宿</span>
                                                </div>
                                            </div>
                                        </NavLink>
                                    </div>
                                    <div>
                                        <NavLink to={'/xiang'}>
                                            <NavLink>
                                                <img src='https://a.cdn-hotels.com/gdcs/production125/d1411/de6003a0-b7a5-11e6-a303-0242ac110093.jpg' alt="" />
                                            </NavLink>
                                            <NavLink className={index.frist_div1_1}>
                                                <img src='https://a.cdn-hotels.com/gdcs/production134/d256/d9e19ce0-b7a4-11e6-b7fc-0242ac1100f6.jpg' alt="" />
                                            </NavLink>
                                            <div className={index.frist_div1}>
                                                <h1>东京</h1>
                                                <span>有 65,910 位用户搜索住宿</span>
                                            </div>
                                            <div className={index.frist_div2}>
                                                <h1>九龙</h1>
                                                <span>有 29,748 位用户搜索住宿</span>
                                            </div>
                                        </NavLink>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div className={index.two}>
                                    <div>
                                        <NavLink to={'/xiang'}>
                                            <img src='https://a.cdn-hotels.com/gdcs/production151/d1067/2be30050-b7a6-11e6-9c00-0242ac110047.jpg' alt="" />

                                            <div className={index.two_div}>
                                                <div>
                                                    <h1>广州</h1>
                                                    <span>有 15,850 位用户搜索住宿</span>
                                                </div>
                                            </div>
                                        </NavLink>
                                    </div>
                                    <div>
                                        <NavLink to={'/xiang'}>
                                            <NavLink>
                                                <img src='https://a.cdn-hotels.com/gdcs/production158/d290/04765e30-b7a2-11e6-b7fc-0242ac1100f6.jpg' alt="" />
                                            </NavLink>
                                            <NavLink className={index.frist_div1_1}>
                                                <img src='https://a.cdn-hotels.com/gdcs/production149/d1917/88864800-b7a4-11e6-a303-0242ac110093.jpg' alt="" />
                                            </NavLink>
                                            <div className={index.two_div1}>
                                                <h1>曼谷</h1>
                                                <span>有 81,043 位用户搜索住宿</span>
                                            </div>
                                            <div className={index.two_div2}>
                                                <h1>北京</h1>
                                                <span>有 21,919 位用户搜索住宿</span>
                                            </div>
                                        </NavLink>
                                    </div>
                                </div>
                            </div>
                            <div className={index.btn}>
                                <Button type="primary" className={index.btns}>更多目的地</Button>
                            </div>
                            <div className={index.last}>
                                <p>
                                    Hotels.com 好订网是一家领先的在线住宿预订网站。我们对旅游行业充满激情。
                                    每一天，我们通过 90 个本地网站和 41 种语言为数百万旅客提供相关的旅游资讯，
                                    向他们大力推广精彩优惠。因此，在帮助客户找到心目中的理想酒店、度假短租、度假村、公寓、旅馆或树屋方面，
                                    我们都能为您提供服务。我们有数十万家合作酒店遍布 200 多个国家和地区，还提供无与伦比的价格保证。
                                    除了有趣且简单易用的网站，我们也为客户提供创新的在线工具以及广受好评的移动端 App。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <Footer />
            </div >
        )
    }

}
export default Index